<template>
  <div id="mountNode"></div>
</template>
<script>
import G6 from "@antv/g6";
G6.registerNode(
  "sql",
  {
    drawShape(cfg, group) {
      const rect = group.addShape("rect", {
        attrs: {
          x: -60,
          y: -25,
          width: 100,
          height: 50,
          radius: 10,
          size: 60,
          stroke: "#5B8FF9",
          fill: "#C6E5FF",
          lineWidth: 2,
        },
        name: "rect-shape",
      });

      if (cfg.name) {
        const name =
          cfg.name.length > 8
            ? cfg.name.substring(0, 8) +
              "\n" +
              cfg.name.substring(8, cfg.name.length)
            : cfg.name;

        const color = cfg.rootNode ? "#333" : "green";
        group.addShape("text", {
          attrs: {
            text: name,
            x: -10,
            y: 0,
            fill: color,
            fontSize: 12,
            textAlign: "center",
            textBaseline: "middle",
            fontWeight: "bold",
          },
          name: "text-shape",
        });
      }
      return rect;
    },
  },
  "single-node"
);

export default {
  data() {
    return {
      chartData: {
        nodes: [
          {
            title: "node1",
            error: true,
            nodeType: "a",
            id: "node1",
            nodeLevel: 2,
            panels: [
              { title: "成功率", value: "11%" },
              { title: "耗时", value: "111" },
              { title: "错误数", value: "111" },
            ],
            x: 100,
            y: 100,
          },
          {
            title: "node2",
            error: false,
            nodeType: "b",
            id: "node2",
            nodeLevel: 0,
            panels: [
              { title: "成功率", value: "11%" },
              { title: "耗时", value: "111" },
              { title: "错误数", value: "111" },
            ],
            x: 100,
            y: 200,
          },
          {
            title: "node3",
            error: false,
            nodeType: "a",
            id: "node3",
            nodeLevel: 3,
            panels: [
              { title: "成功率", value: "11%" },
              { title: "耗时", value: "111" },
              { title: "错误数", value: "111" },
            ],
            collapse: true,
            x: 100,
            y: 300,
          },
        ],
      },
      graph: "",
    };
  },
  mounted() {
    this.getCharts();
  },
  methods: {
    getCharts() {
      const mountNode = document.getElementById("mountNode");
      const width = mountNode.scrollWidth;

      const height = mountNode.scrollHeight || 750;

      // todo 设置鼠标悬停显示详情操作
      const tooltip = new G6.Tooltip({
        offsetX: 30,
        offsetY: 10,
        getContent(e) {
          const outDiv = document.createElement("div");
          // outDiv.style.width = "auto";
          outDiv.style.color = "green";
          outDiv.innerHTML = `
            <div style="min-width:50px;font-size: 12px;text-align: center;">
                <p style="">${
                  e.item.getModel().label || e.item.getModel().name
                }</p>
            </div>`;
          return outDiv;
        },
        itemTypes: ["node"],
      });
      this.graph = new G6.Graph({
        container: "mountNode", // 指定挂载点
        // 画布宽高
        width,
        height,
        defaultNode: {
          type: "sql",
        },
        plugins: [tooltip], //插件
        //边的样式配置
        defaultEdge: {
          type: "polyline",
          // 边样式配置
          style: {
            stroke: "#409EFF", // 边描边颜色
            endArrow: {
              path: G6.Arrow.triangle(5, 5, 0), // 使用内置箭头路径函数，参数为箭头的 宽度、长度、偏移量（默认为 0，与 d 对应）
              d: 0,
              fill: "#409EFF",
              opacity: 0.5,
              lineWidth: 1,
            },
          },
          labelCfg: {
            position: "center",
          },
        },
        nodeStateStyles: {
          selected: {
            stroke: "#d9d9d9",
            fill: "#5394ef",
          },
        },

        modes: {
          default: ["drag-canvas", "zoom-canvas", "click-select"],
        },
        fitView: true,
        // fitViewPadding: -10
      });
      //读取数据
      this.graph.data(this.chartData);
      // 渲染图
      this.graph.render();
      this.bindEvents();
      this.graph.fitView();
      if (typeof window !== "undefined")
        window.onresize = () => {
          if (!this.graph || this.graph.get("destroyed")) return;
          if (!mountNode || !mountNode.scrollWidth || !mountNode.scrollHeight)
            return;
          this.graph.changeSize(mountNode.scrollWidth, mountNode.scrollHeight);
        };
    },

    bindEvents() {
      this.graph.on("node:click", (e) => {
        //节点绑定点击事件
        if (e.item) {
          console.log(e.item);
        }
      });
    },
  },
};
</script>